<template>
  <div class="login">
    <div class="login_box">
      <div class="login_box--title">云笔记管理系统</div>
      <el-form
        ref="loginFormRef"
        :rules="rules"
        :model="loginForm"
        label-width="80px"
        label-position="top"
        class="login_box--form"
      >
        <el-form-item label="用户名：" prop="userName">
          <el-input
            v-model="loginForm.userName"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="密  码：" prop="passWord">
          <el-input
            v-model="loginForm.passWord"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="" prop="type">
          <el-checkbox label="记住密码" v-model="loginForm.type" />
        </el-form-item>
        <el-form-item>
          <el-button
            class="login_box--submit"
            type="primary"
            @click="submitForm(loginFormRef)"
            >登 录</el-button
          >
        </el-form-item>
      </el-form>
      <div class="login_box--otherlogin">
        <el-divider content-position="center">其他登录方式</el-divider>
        <div class="login_box--otherlogin__loginicon">
          <svg class="icon svg-icon" aria-hidden="true" @click="otherLogin">
            <use xlink:href="#icon-weixin2"></use>
          </svg>
          <svg class="icon svg-icon" aria-hidden="true" @click="otherLogin">
            <use xlink:href="#icon-QQ11"></use>
          </svg>
          <svg class="icon svg-icon" aria-hidden="true" @click="otherLogin">
            <use xlink:href="#icon-weibo1"></use>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance, FormRules, Action } from "element-plus";
import { ElMessage, ElMessageBox,ElNotification } from "element-plus";
import useUserStore from "@/store/modules/user";
import { usePermissionStore } from "@/store/modules/permission"
// import { Login } from "@/api/login";
const loginFormRef = ref<FormInstance>();
const loginForm = reactive({
  userName: "",
  passWord: "",
  type: false,
});
const rules = reactive<FormRules>({
  userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
const router = useRouter();
const submitForm = (loginFormRef: FormInstance | undefined) => {
  if (!loginFormRef) return;
  loginFormRef.validate((valid) => {
    if (valid) {
      useUserStore()
        .Login(loginForm).then((res:any) => {
          if(res.code == 200){
            ElNotification({
              title: '通知',
              message: res.message,
              type: 'success',
            })
            router.push("/workbench");
          } else {
            ElNotification({
              title: '通知',
              message: res.message,
              type: 'error',
            })
          }
        })
        
    } else {
      return false;
    }
  });
};
const otherLogin = () => {
  ElMessageBox.alert("功能正在开发", "提示", {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: "好 的",
    callback: (action: Action) => {
      ElMessage({
        type: "info",
        message: `action: ${action}`,
      });
    },
  });
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100vh;
  background: url("../../assets/login.jpg") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  &_box {
    width: 300px;
    height: 450px;
    background-color: #fff;
    box-shadow: 5px 5px 8px #c7c7c7;
    border-radius: 8px;
    padding: 20px 30px;
    opacity: 0.8;
    &--title {
      font-size: 28px;
      font-weight: 600;
      text-align: center;
      margin: 10px 0 30px 0;
    }
    &--submit {
      width: 100%;
      // margin-top: 20px;
    }
    &--form {
      width: 100%;
    }
    &--otherlogin {
      width: 100%;
      &__loginicon {
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        .icon {
          font-size: 36px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
